/**
 * LayUI单页面应用主JS文件
 */

// 页面加载完成后执行
layui.use(['element', 'layer', 'table', 'form'], function() {
    var element = layui.element;
    var layer = layui.layer;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.$;
    
    // 初始化页面
    initPage();
    
    // 导航菜单点击事件
    $(document).on('click', '.nav-item', function() {
        var pageId = $(this).data('id');
        switchPage(pageId);
    });
    
    // 初始化表格
    function initTable() {
        table.render({
            elem: '#demo-table',
            url: '', // 这里可以设置数据接口
            page: true,
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
                {field: 'name', title: '名称', width: 120},
                {field: 'type', title: '类型', width: 150},
                {field: 'value', title: '数值', width: 100, sort: true},
                {field: 'status', title: '状态', width: 100},
                {field: 'description', title: '描述'},
                {field: 'createTime', title: '创建时间', width: 180},
                {fixed: 'right', title: '操作', toolbar: '#table-tool-bar', width: 150}
            ]],
            data: [] // 静态假数据已移除 - 需要连接真实数据接口
        });
        
        // 监听表格工具条事件
        table.on('tool(demo-table)', function(obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('查看ID：' + data.id);
            } else if (obj.event === 'del') {
                layer.confirm('确定删除此行数据吗？', function(index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.alert('编辑行：<br>' + JSON.stringify(data));
            }
        });
    }
    
    // 初始化表单
    function initForm() {
        // 监听表单提交
        form.on('submit(formDemo)', function(data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    }
    
    // 初始化弹出层示例
    function initLayer() {
        // Alert
        $('#layer-demo-1').on('click', function() {
            layer.alert('这是一个Alert弹出层', {icon: 1});
        });
        
        // Confirm
        $('#layer-demo-2').on('click', function() {
            layer.confirm('这是一个Confirm弹出层', {
                btn: ['确定', '取消']
            }, function() {
                layer.msg('点击了确定按钮');
            }, function() {
                layer.msg('点击了取消按钮');
            });
        });
        
        // Prompt
        $('#layer-demo-3').on('click', function() {
            layer.prompt({title: '请输入内容', formType: 2}, function(text, index) {
                layer.close(index);
                layer.msg('您输入的内容是：' + text);
            });
        });
        
        // 页面层
        $('#layer-demo-4').on('click', function() {
            layer.open({
                type: 1,
                title: '页面层',
                area: ['500px', '300px'],
                content: '<div style="padding: 20px;">这是一个页面层示例</div>'
            });
        });
    }
    
    // 初始化页面
    function initPage() {
        // 默认显示首页
        switchPage('home');
        
        // 初始化各个模块
        initTable();
        initForm();
        initLayer();
    }
    
    // 切换页面
    function switchPage(pageId) {
        // 隐藏所有页面
        $('.content-page').hide();
        
        // 显示选中的页面
        $('#' + pageId).fadeIn(300);
        
        // 更新页面标题
        updatePageTitle(pageId);
        
        // 更新导航菜单选中状态
        updateNavActive(pageId);
    }
    
    // 更新页面标题
    function updatePageTitle(pageId) {
        var titleMap = {
            'home': '首页',
            'table': '表格示例',
            'form': '表单示例',
            'layer': '弹出层示例',
            'component': '组件示例',
            'about': '关于我们'
        };
        
        $('.layui-card-header').text(titleMap[pageId] || '未知页面');
    }
    
    // 更新导航菜单选中状态
    function updateNavActive(pageId) {
        // 移除所有导航项的选中状态
        $('.nav-item').parent().removeClass('layui-this');
        
        // 添加当前页面对应导航项的选中状态
        $('.nav-item[data-id="' + pageId + '"]').parent().addClass('layui-this');
    }
});